<template>
  <div id="sign-up">
    <div class="content">
      <h1>注册账号</h1>
      <div class="form-box">
        <div class="form-item">
          <label class="form-item__label">邮箱：</label>
          <div class="form-item__content">
            <input type="text" v-model="register.email" class="form-item__input">
          </div>
        </div>
        <div class="form-item">
          <label class="form-item__label">名称：</label>
          <div class="form-item__content">
            <input type="text" v-model="register.username" class="form-item__input">
          </div>
        </div>
        <div class="form-item">
          <label class="form-item__label">密码：</label>
          <div class="form-item__content">
            <input type="password" v-model="register.password" class="form-item__input">
          </div>
        </div>
        <div class="form-item">
          <label class="form-item__label">确认密码：</label>
          <div class="form-item__content">
            <input type="password" v-model="confirmPassword" class="form-item__input">
          </div>
        </div>
        <div class="form-item">
          <label class="form-item__label">单位：</label>
          <div class="form-item__content">
            <input type="text" v-model="register.unit" class="form-item__input">
          </div>
        </div>
        <div class="form-item" style="margin-bottom: 88px;">
          <label class="form-item__label">手机号：</label>
          <div class="form-item__content">
            <input type="text" v-model="register.phone" class="form-item__input">
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__content">
            <button class="form-item__btn" style="margin-right: 17px;" @click="userRegister(register)">注册</button>
            <button class="form-item__btn" @click="goSignIn()">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '../../util/event-bus'
export default {
  name: 'SignUp',

  data() {
    return {
      register: {},
      confirmPassword: ''
    }
  },

  methods: {
    goSignIn() {
      eventBus.$emit('goSignIn', 'in');
    },
    userRegister(registerData) {
      console.log(registerData)
      this.goSignIn();
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #sign-up {
    width: 100%;
    height: $min-height;
    background: url("../../../static/images/signViews/sign-up-background.jpg") no-repeat center;
    position: relative;
    .content {
      width: 596px;
      position: absolute;
      top: 104px;
      left: 50%;
      transform: translateX(-50%);
      h1 {
        font-size: 40px;
        font-weight: normal;
        line-height: 40px;
        height: 40px;
        margin: 0;
      }
      .form-box {
        margin-top: 56px;
        .form-item {
          margin-bottom: 36px;
          .form-item__label {
            width: 130px;
            box-sizing: border-box;
            float: left;
            text-align: right;
            vertical-align: middle;
            font-size: 26px;
            line-height: 26px;
          }
          .form-item__content {
            margin-left: 130px;
            position: relative;
            font-size: 26px;
            line-height: 26px;
            text-align: left;
            .form-item__input {
              box-sizing: border-box;
              height: 26px;
              width: 380px;
              padding: 0 13px;
              line-height: 26px;
              font-size: 26px;
              border: 0;
              border-bottom: 2px solid #ffffff;
              background: transparent;
              color: #ffffff;
              outline: none;
            }
            .form-item__btn {
              background: rgba(35, 74, 136, 0.9);
              border: none;
              border-radius: 4px;
              width: 160px;
              height: 40px;
              line-height: 40px;
              font-size: 24px;
              color: #ffffff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
